<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
// import { getHometab,} from '../api/home';

import recommentBar from '../components/recommentBar.vue';
import intelligentBar from '../components/intelligentBar.vue';
import electricalBar from '../components/electricalBar.vue';
import tvBar from '../components/tvBar.vue';
import laptopBar from '../components/laptopBar.vue';



// tab选项卡
const active = ref(0);


// let id1 = ref(0);
// let type1 = ref('home')
// const onClickTab = ({name}) => {
// //  console.log(name);
// //  console.log("active=",active.value )
//   // let numreg = /[0-9]/g;
//   // let worldreg = /[a-z]/g;
//   // id.value = Number( name.match(numreg).join('') )
//   // type.value = name.match(worldreg).join('')

//   // console.log("id=>",id.value)
//   // console.log("type=>",type.value)

// };
let backTop = ref();




// 实时滚动条高度
const scrollTop = () => {
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  // console.log(scroll)
  if (scroll > 700) {
    backTop.value.style.display = 'block'
  }else{
    backTop.value.style.display = 'none'
  }
}

const backtoTop = ()=>{
  // console.log(1111)
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
}



onMounted(() => {
  window.addEventListener('scroll', scrollTop, true)
})
onUnmounted(() => {


})



</script>

<template>
  <div class="home-page">
    <div class="top">
      <div class="search-bar">

        <div class="logo-box">
          <img src="../assets/images/icon-header-logo.png" alt="logo">
        </div>

        <div class="search">
          <span class="iconfont icon-sousuo"></span>
          <input type="search" placeholder="请输入商品搜索" />
        </div>

        <span class="iconfont icon-geren1"></span>
      </div>
      <!-- 首页选项卡 -->
      <div class="Tab">
        <!-- @click-tab="onClickTab"  -->
        <van-tabs v-model:active="active" animated sticky background="#f2f2f2" title-inactive-color="#747474"
          title-active-color="#ed5b00" offset-top="50px" color="#ff6900" line-height="2px">

          <van-tab title="推荐">
            <recommentBar></recommentBar>
            <!--:id="id" :type="type" name="0home" -->
          </van-tab>

          <van-tab title="智能">
            <intelligentBar></intelligentBar>
            <!-- :id1="id1" :type1="type1" name="10288activity"-->
          </van-tab>

          <van-tab title="电视">
            <tvBar></tvBar>
            <!-- :id2="id2" :type2="type2" name="19071activity"-->
          </van-tab>

          <van-tab title="家电">
            <electricalBar></electricalBar>
            <!-- :id3="id3" :type3="type3" name="18642activity"-->
          </van-tab>

          <van-tab title="笔记本">
            <laptopBar></laptopBar>
            <!-- :id4="id4" :type4="type4" name="13176activity"-->
          </van-tab>

        </van-tabs>

      </div>

    </div>


    <!-- 回到顶部按钮 -->
    <div class="iconfont icon-dingbu" ref="backTop" style="display: none;" @click="backtoTop"></div>


  </div>
</template>

<style lang="scss">
.home-page {
  width: 100%;
  .search-bar {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 0px;
    z-index: 999;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;



    .logo-box {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 25px;
        height: 25px;
      }
    }

    .search {
      position: relative;
      flex: 1;

      .icon-sousuo {
        position: absolute;
        top: 50%;
        left: -9px;
        transform: translateY(-50%);
        font-size: 15px;

      }

      input {
        width: 100%;
        height: 35px;
        text-indent: 30px;
        outline: none;
        border: none;


      }
    }



    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 25px;

    }

  }

  .icon-dingbu {
    width: 35px;
    height: 35px;
    position: sticky;
    left: 88%;
    bottom: 70px;
    border-radius: 50%;
    border: 1px solid #ececec;
    color: #b1b1b1;
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0.8);

  }
}
</style>
